<template>
  <div>
      <div class="selectBtn">
        <div style="width: 400px;">
        <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
            <el-select style="width: 120px;" v-model="searchKey" slot="prepend" placeholder="请选择">
            <el-option label="姓名" value="name"></el-option>
            <el-option label="岗位" value="postId"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="list"></el-button>
        </el-input>
        </div>
        <div>
            <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        </div>
      </div>
      <div style="margin-top: 24px;">
        <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
        <el-table-column prop="name" label="姓名" ></el-table-column>
        <el-table-column prop="postName" label="岗位" ></el-table-column>
        <el-table-column prop="certificateName" label="财会资格证类型" ></el-table-column>
        <el-table-column prop="certificateNum" label="财会资格证书号" ></el-table-column>
        <el-table-column prop="createDate" label="创建时间" ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="{row}">
            <el-button type="text" @click="showDelDialog(row.id)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
            type="flex"
            align="middle"
            justify="center"
            style="margin-top: 20px"
        >
            <el-col :span="5">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pageSize"
                @current-change="changePage"
                :current-page.sync="page.currentPage"
            ></el-pagination>
            </el-col>
        </el-row>
      </div>

      <el-dialog
        title="财务人员申报"
        :visible.sync="dialogVisible"
        width="45%">
        <div class="formLayout">
          <div class="valueName"> <span style="color: red;">*</span> 姓名：</div>
          <el-input style="width: 60%;height: 40px" v-model="name" :clearable="true"></el-input>
        </div>
        <div class="formLayout">
          <div class="valueName"> <span style="color: red;">*</span> 身份证件号：</div>
          <el-input style="width: 60%;height: 40px" v-model="idcard" :clearable="true"></el-input>
        </div>
        <div class="formLayout">
          <div class="valueName"> <span style="color: red;">*</span> 财会资格证书类型：</div>
           <el-select v-model="certificateType" placeholder="" style="width: 60%;height: 40px">
              <el-option
                v-for="item in certificateTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
        </div>
        <div class="formLayout">
          <div class="valueName"> <span style="color: red;">*</span> 财会资格证书号：</div>
          <el-input style="width: 60%;height: 40px" v-model="certificateNum" :clearable="true"></el-input>
        </div>
        <div class="formLayout">
            <div class="valueName"> <span style="color: red;">*</span> 岗位：</div>
            <el-select v-model="postId" placeholder="" style="width: 60%;height: 40px">
                <el-option
                  v-for="item in postIdList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" style="margin-right: 20px">取 消</el-button>
          <el-button type="primary" @click="submit" style="margin-right: 20px">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import { listDictionary, addPer, listPer, delPer } from '@/api'
export default {
  data () {
    return {
      selects: '',
      input3: '',
      page: {
        // 分页数据
        total: 0, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 10 // page-size的默认值是10条
      },
      tableData: [
      ],
      certificateTypeList: [],
      postIdList: [],
      dialogVisible: false,
      name: '',
      idcard: '',
      certificateType: '',
      certificateNum: '',
      postId: '',
      searchKey: '',
      searchValue: ''
    }
  },
  created () {
    this.listDictionary(12)
    this.listDictionary(14)
    this.list()
  },
  methods: {
    // 当前页
    changePage () {
    },
    async listDictionary (id) {
      const ser = await listDictionary({ typeId: id })
      console.log(ser)
      if (ser?.code === 200) {
        switch (id) {
          case 12:
            this.certificateTypeList = ser.data
            break
          case 14:
            this.postIdList = ser.data
            break
        }
      }
    },
    formatTime (item) {
      return this.$formatTime(item)
    },
    getDictionaryIdByName (name, list) {
      var id = 0
      for (const key in list) {
        if (list[key].name === name) {
          id = list[key].id
          break
        }
      }
      return id
    },
    async submit () {
      if (this.name === '') {
        this.$message({
          message: '请填写姓名',
          type: 'warning',
          offset: 80
        })
        return
      }
      if (this.idcard === '') {
        this.$message({
          message: '身份证件号',
          type: 'warning',
          offset: 80
        })
        return
      }
      if (this.certificateType === '') {
        this.$message({
          message: '请选择财会资格证书类型',
          type: 'warning',
          offset: 80
        })
        return
      }
      if (this.certificateNum === '') {
        this.$message({
          message: '财会资格证书号',
          type: 'warning',
          offset: 80
        })
        return
      }
      if (this.postId === '') {
        this.$message({
          message: '请选择岗位',
          type: 'warning',
          offset: 80
        })
        return
      }
      var data = {
        servicesId: localStorage.getItem('platform'),
        name: this.name,
        idCard: this.idcard,
        certificateType: this.getDictionaryIdByName(this.certificateType, this.certificateTypeList),
        certificateNum: this.certificateNum,
        postId: this.getDictionaryIdByName(this.postId, this.postIdList)
      }
      const ser = await addPer(data)
      console.log(ser)
      if (ser?.code === 200) {
        this.dialogVisible = false
        this.$message({
          message: '新增财务人员成功',
          type: 'success',
          offset: 80
        })
        this.list()
      }
    },
    async list () {
      var data = {
        servicesId: localStorage.getItem('platform'),
        page: this.page.currentPage
      }
      if (this.searchKey !== '' && this.searchValue !== '') {
        data[this.searchKey] = this.searchValue
      }
      const ser = await listPer(data)
      console.log(ser)
      if (ser?.code === 200) {
        const { list, total, lastPage } = ser.data
        this.tableData = list
        this.page.total = total
        this.lastPage = lastPage
        this.tableData.forEach(element => {
          element.createDate = this.formatTime(element.createDate * 1000)
        })
      }
    },
    showDelDialog (id) {
      this.$confirm('是否删除此财务人员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(id)
      }).catch(() => {
        this.$message({
          ype: 'info',
          message: '已取消删除'
        })
      })
    },
    async del (id) {
      var data = {
        id: id
      }
      const ser = await delPer(data)
      console.log(ser)
      if (ser?.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success',
          offset: 80
        })
        this.list()
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .el-button+.el-button {
        margin: 0;
    }
    .selectBtn {
        display: flex;
        margin-top: 15px;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .formLayout {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-right:70px;
        margin-bottom: 20px;
    }
    .valueName {
        width: 40%;
        text-align: right;
        margin-right: 10px;
        font-size: 14px;
    }
</style>
